<template>
  <view class="page-list" id="page-listss">
    <u-sticky>
      <list-head
        :refresh="refresh"
        :changeTab="changeTab"
        :sticky="sticky"
        :listLoad="listLoad"
        :tabIndex="tabIndex"
      />
    </u-sticky>

    <view class="skeleton-view" v-if="listLoad">
      <view
        class="skeleton-item"
        v-for="(item, index) in Array(3)"
        :key="index"
      >
        <u-skeleton rows="3" loading :title="false" />
      </view>
    </view>

    <block v-else>
      <craftsman-list :list="craftsmanList" v-if="!tabIndex" />
      <service-list :list="serviceList" v-else />
    </block>

    <u-loadmore :status="status" />
  </view>
</template>

<script>
import listHead from "./listHead";

export default {
  components: {
    listHead,
  },
  props: {
    status: {
      type: String,
      default: "nomore",
    },
    refresh: {
      type: Function,
      default: () => {},
    },
    listLoad: {
      type: Boolean,
      default: false,
    },
    sticky: {
      type: Boolean,
      default: false,
    },
    tabIndex: {
      type: Number,
      default: 0,
    },
    changeTab: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      craftsmanList: [1, 1, 1, 1, 1, 1, 1, 1],
      serviceList: [1, 1, 1, 1, 1, 1, 1, 1, 1],
    };
  },
};
</script>

<style scoped lang="scss">
.page-list {
  margin-top: 16px;
}

.skeleton-view {
  .skeleton-item {
    padding: 20px 0;
  }
}
</style>